$panel-app-header: (
  'color': getCssVar(color, primary, text),
  'bg-color': getCssVar(color, primary),
  'hover-bg-color': getCssVar(color, primary, hover),
  'select-bg-color': getCssVar(color, primary, active),
  'horizontal-color': getCssVar(color, primary, text),
  'horizontal-bg-color': getCssVar(color, primary),
  'horizontal-hover-bg-color': getCssVar(color, primary, hover),
  'horizontal-select-bg-color': getCssVar(color, primary, active),
  'border-color': getCssVar(color, border),
);

@include b(panel-app-header) {
  @include set-component-css-var('panel-app-header', $panel-app-header);

  // 临时添加important
  #{getCssVarName(color, text, 0)}: getCssVar(panel-app-header, color) !important;
  #{getCssVarName(color, text, 1)}: getCssVar(panel-app-header, color) !important;
  #{getCssVarName(color, text, 2)}: getCssVar(panel-app-header, color) !important;
  #{getCssVarName(color, text, 3)}: getCssVar(panel-app-header, color) !important;
  width: 100%;
  height: 100%;
  color: getCssVar(panel-app-header, color);
  background-color: getCssVar(panel-app-header, bg, color);

  * {
    #{getCssVarName(color, primary)}: getCssVar(panel-app-header, bg, color);
    #{getCssVarName(color, primary, hover)}: getCssVar(panel-app-header, hover, bg, color);
    #{getCssVarName(color, primary, active)}: getCssVar(panel-app-header, select, bg, color);
  }

  >.#{bem(row)} {
    height: 100%;
  }
}

@include b(panel-app-header) {
  @include m(horizontal) {
    // 临时添加important
    #{getCssVarName(color, text, 0)}: getCssVar(panel-app-header, horizontal, color) !important;
    #{getCssVarName(color, text, 1)}: getCssVar(panel-app-header, horizontal, color) !important;
    #{getCssVarName(color, text, 2)}: getCssVar(panel-app-header, horizontal, color) !important;
    #{getCssVarName(color, text, 3)}: getCssVar(panel-app-header, horizontal, color) !important;
    color: getCssVar(panel-app-header, horizontal, color);
    background-color: getCssVar(panel-app-header, horizontal, bg, color);

    * {
      #{getCssVarName(color, primary)}: getCssVar(panel-app-header, horizontal, bg, color);
      #{getCssVarName(color, primary, hover)}: getCssVar(panel-app-header, horizontal, hover, bg, color);
      #{getCssVarName(color, primary, active)}: getCssVar(panel-app-header, horizontal, select, bg, color);
    }
  }
}
